<template>
    <div class="sort">
        <div class="sortItem"  v-for="(item,index) of sortItem" :key="item.itemId" :class="item.active?'active':''" @click="handleClick(item)">
            {{item.itemText}}
            <img class="sortIcon" :src="item.itemIcon"/>
        </div>
    </div>
</template>

<script>
import sortDefault from '@/assets/images/sortDefault.svg'
import sortUp from '@/assets/images/sortUp.svg'
import sortDown from '@/assets/images/sortDown.svg'
export default {
    name: "Sort",
    data () {
        return {
            active: 'base',
            sortItem: [{
                itemText: '项目名称',
                itemId:"proj.projectname",
                itemIcon: '',
                active:false
            }, {
                itemText: '时间',
                itemId:"proj.MODIFYDATE",
                itemIcon: '',
                active:false
            }, {
                itemText: '阶段',
                itemId:"pp.phasename",
                itemIcon: '',
                active:false
            }]
        }
    },
    methods: {
        initNoneSort(){
            for(let m of this.sortItem){
                m.itemIcon=''
                m.active=false;
            }
        },
        handleClick (item) {
            //如果当前是按此排序的，即当前为选中排序状态，切换标签就行
            if(item.itemIcon){
                item.itemIcon= item.itemIcon==sortDown?sortUp:sortDown
            }else{
                this.initNoneSort();
                item.itemIcon=sortDown;
                item.active=true;
            }
            let sortText=item.itemId + (item.itemIcon==sortUp?" ASC": " DESC")
            this.$emit("submitSort",sortText,true)
        }
    }
}
</script>

<style scoped>

</style>
